import { useContext } from 'react'

import { DataContext } from '../../store/DataContext'

import './header.scss'

export default function Header() {

    const { data, dispatch } = useContext(DataContext)

    const foodTags = document.getElementsByClassName('turn_food_tag')

    const handleStart = () => {
        // let i = 0

        if (data.length === 0) {
            alert('还没有添加选项呢，输入选项后点击空白处或回车以添加。')
            return
        }

        let randNum = parseInt(Math.random() * data.length)

        alert(foodTags[randNum].innerText)

        // for (let foodTag of foodTags) {
        //     foodTag.style.backgroundColor = 'white'
        // }

        // const iToken = setInterval(() => {
        //     if (i === foodTags.length) i = 0
        //     if (i === 0) {
        //         foodTags[foodTags.length - 1].style.backgroundColor = 'white'
        //     } else {
        //         foodTags[i - 1].style.backgroundColor = 'white'
        //     }

        //     foodTags[i].style.backgroundColor = 'red'

        //     i += 1
        //     randNum -= 1
        //     if (!randNum) {
        //         let res = i - 2 < 0 ? foodTags[data.length - 1].innerText : foodTags[i - 2].innerText
        //         alert(res)
        //         for (let foodTag of foodTags) {
        //             foodTag.style.backgroundColor = 'white'
        //         }
        //         clearInterval(iToken)
        //     }
        // }, 50);
    }

    const handleClear = () => {
        dispatch({ type: 'set', value: [] })
    }

    return (
        <div className='turn_header'>
            <div className='turn_header_start' onClick={handleStart} >开始</div>
            <div className='turn_header_clear' onClick={handleClear} >清除全部</div>
        </div>
    )
}
